<template>
<div class="keyanPage">
  <div v-if="$route.name === 'keyanList'">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>项目审批</el-breadcrumb-item>
        <el-breadcrumb-item>项目可研评审</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="searchBox">
      <div class="left">
        <el-form :model="searchForm" label-width="100px" class="searchForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资金来源" prop="capitalSource">
                <el-select v-model="searchForm.capitalSource" placeholder="请选择资金来源">
                  <el-option label="民政局" value="民政局"></el-option>
                  <el-option label="公安局" value="公安局"></el-option>
                  <el-option label="财政局" value="财政局"></el-option>
                  <el-option label="国税局" value="国税局"></el-option>
                  <el-option label="土地局" value="土地局"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批状态" prop="currentState">
                <el-select v-model="searchForm.currentState" placeholder="请选择审批状态">
                  <el-option-group
                    v-for="group in stateOptions"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="项目计划时间">
                <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目类型" prop="projectCategoryName">
                <el-select v-model="searchForm.projectCategoryName" placeholder="请选择项目类型">
                  <el-option label="全市发展规划" value="1"></el-option>
                  <el-option label="专项发展规划" value="2"></el-option>
                  <el-option label="软件开发" value="3"></el-option>
                  <el-option label="系统集成" value="4"></el-option>
                  <el-option label="民政局" value="5"></el-option>
                  <el-option label="公安局" value="6"></el-option>
                  <el-option label="财政局" value="7"></el-option>
                  <el-option label="国税局" value="8"></el-option>
                  <el-option label="土地局" value="9"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="right">
        <el-button-group>
          <el-button type="primary" @click="getList(1)">查询</el-button>
          <el-button type="default" @click="resetSearchForm">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="listBox">
      <el-button type="primary" @click="$router.push('/home/shenpi/keyan/add')"><i class="el-icon-plus"></i>新增</el-button>
      <el-table
        :data="list"
        style="width: 100%"
        height="500"
        class="mt20"
        @sort-change="onSortChange">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          label="项目名称"
          align="center"
          prop="projectName">
        </el-table-column>
        <el-table-column
          align="center"
          label="项目编号"
          prop="projectNo">
        </el-table-column>
        <el-table-column
          align="center"
          sortable="custom"
          prop="projectBudget"
          label="项目概算">
        </el-table-column>
        <el-table-column
          align="center"
          prop="capitalSource"
          label="资金来源">
        </el-table-column>
        <el-table-column
          align="center"
          prop="submitTime"
          label="报批时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            {{getStateStr(scope.row.currentState)}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="toView(scope.row)">查看</el-link>
            <template v-if="scope.row.currentState == 1">
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary">编辑</el-link>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
  <router-view @success="getList" v-else></router-view>
</div>
</template>

<script>
export default {
  name: 'keyan',
  components: {},
  data () {
    return {
      pageSize: 10,
      page: 1,
      total: 0,
      list: [],
      searchForm: {
        projectName: '',
        capitalSource: '',
        currentState: '',
        projectCategoryName: '',
        orderFlag: ''
      },
      searchTime: []
    }
  },
  computed: {
    stateOptions () {
      return [{
        label: '',
        options: [{
          label: '草稿',
          value: 1
        }, {
          label: '已提交',
          value: 2
        }, {
          label: '可研通过',
          value: 99
        }]
      }, {
        label: '可研1000W以下',
        options: [{
          label: '规划处确认',
          value: 10
        }, {
          label: '规划处预审',
          value: 11
        }, {
          label: '规划处联合评审',
          value: 12
        }, {
          label: '批复',
          value: 13
        }]
      }, {
        label: '可研1000W以上',
        options: [{
          label: '规划处确认',
          value: 20
        }, {
          label: '规划处预审',
          value: 21
        }, {
          label: '规划处联合评审',
          value: 22
        }, {
          label: '初审',
          value: 23
        }, {
          label: '市长审定',
          value: 24
        }, {
          label: '批复',
          value: 25
        }]
      }]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    toView (item) {
      let viewUrl = '/home/shenpi/keyan/view?id=' + item.processId
      if (item.processInstanceIdCs) {
        viewUrl += '&pid=' + item.processInstanceIdCs
      }
      this.$router.push(viewUrl)
    },
    getStateStr (state) {
      let stateStr = ''
      if (state === 1) {
        stateStr = '草稿'
      } else if (state === 2) {
        stateStr = '已提交'
      } else if (state === 10) {
        stateStr = '规划处确认'
      } else if (state === 11) {
        stateStr = '规划处预审'
      } else if (state === 12) {
        stateStr = '规划处联合评审'
      } else if (state === 13) {
        stateStr = '批复'
      } else if (state === 20) {
        stateStr = '规划处确认'
      } else if (state === 21) {
        stateStr = '规划处预审'
      } else if (state === 22) {
        stateStr = '规划处联合评审'
      } else if (state === 23) {
        stateStr = '初审'
      } else if (state === 24) {
        stateStr = '市长审定'
      } else if (state === 25) {
        stateStr = '批复'
      } else if (state === 99) {
        stateStr = '可研通过'
      }
      return stateStr
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getList()
    },
    handleCurrentChange (value) {
      this.getList(value)
    },
    getList (page) {
      if (page) {
        this.page = page
      }
      let params = Object.assign({}, {
        type: 1,
        pageNumber: this.page,
        pageSize: this.pageSize
      }, this.searchForm)
      if (this.searchTime.length > 0) {
        params['planBeginTime'] = this.searchTime[0]
        params['planEndTime'] = this.searchTime[1]
      }
      this.axios.get('/projectProcess/getList', {
        params
      }).then(res => {
        if (res.code !== 1000) {
          this.$message.error(res.message)
          return
        }
        this.list = res.data.records
        this.total = res.data.total
      })
    },
    resetSearchForm () {
      this.searchForm = {
        projectName: '',
        capitalSource: '',
        currentState: '',
        projectCategoryName: ''
      }
      this.searchTime = []
    },
    onSortChange (target) {
      const { order, prop } = target
      if (prop === 'projectBudget') {
        if (order === 'ascending') {
          this.searchForm.orderFlag = 1
        } else if (order === 'descending') {
          this.searchForm.orderFlag = 2
        } else {
          this.searchForm.orderFlag = ''
        }
      }
      this.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.keyanPage{
  .searchBox{
    display: flex;
    margin-top: 20px;
    .left{
      flex: 1;
      background: #fff;
      padding: 20px 20px 0;
    }
    .right{
      width: 158px;
      background: #EDF0FA;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .listBox{
    background: #fff;
    margin-top: 20px;
    padding: 20px;
    .pageBox{
      padding-top: 20px;
      text-align: right;
    }
  }
}
</style>
